

<style lang="scss" scoped>
@font-face {
  font-family: ledFont;
  src: url('~@/assets/styles/fonts/UnidreamLED.ttf');
}

@font-face {
  font-family: ysHFont;
  src: url('~@/assets/styles/fonts/ysbtH.ttf');
}

@font-face {
  font-family: dinFont;
  src: url('~@/assets/styles/fonts/DIN-Black.otf');
}

.cockpit-main {
  // position: fixed;
  // top: 0;
  // left: 0;
  // width: 1920px;
  width: 100%;
  height: 1080px;
  z-index: 9999;
  background: url(~@/assets/image/cockpit-bg.png) no-repeat;
  background-size: 100% 100%;

  .cockpit-hd {

    img {
      width: 840px;
      height: 109px;
    }

    .fr {
      color: #fff;
      margin-top: 20px;
      margin-right: 45px;

      &>div {
        display: inline-block;
      }

      .time {
        font-size: 32px;
        font-family: dinFont;
        letter-spacing: 10px;
      }

      .month {
        text-align: center;
        margin: 0 18px;
        font-family: dinFont;


        span:nth-child(1) {
          font-size: 16px;
          opacity: .6;
          display: block;
          letter-spacing: 3px;
        }

        span:nth-child(2) {
          font-size: 24px;
          font-family: dinFont;
          letter-spacing: 4px;
        }
      }

      .week {
        font-size: 20px;
      }
    }
  }

  .cockpit-bd {
    padding-right: 15px;

    .fl {
      // width: 825px;
      width: 44%;
      height: 552px;
      margin-left: 25px;
      // background: url(~@/assets/image/cockpit-map-bg.png) no-repeat;
      background-color: rgba(7, 24, 41, .2);
      box-shadow: 0px 0px 13px 0px #1a2939;
      background-size: 100% 100%;

      ul {
        padding-left: 20px;
        margin: 13px 0 0;
        color: #a0c1dc;

        li {
          list-style: none;
          float: left;
          width: 92px;
          height: 60px;
          line-height: 23px;
          padding: 8px;
          text-align: center;
          margin-right: 10px;
          cursor: pointer;
          background: url(~@/assets/image/cockpit-menu-bg.png) no-repeat;
          background-size: 100% 100%;

          div {
            letter-spacing: 2px;

            &.area {
              opacity: .8;
            }

            &.digital {
              font-family: ledFont;
              font-size: 23px;
              color: #7999b8;
            }

            &.num {
              display: none;
            }

            &.matter {
              display: none;
            }
          }

          &.active {
            width: 121px;
            height: 86px;
            background: url(~@/assets/image/cockpit-menu-active-bg.png) no-repeat;
            background-size: 100% 100%;

            .area {
              color: #00eaff;
            }

            .digital {
              display: none;
            }

            .num {
              color: #37ffef;
              font-family: ledFont;
              font-size: 28px;
              display: block;
              margin-top: 2px;
            }

            .matter {
              display: block;
              margin-top: -2px;
            }

            span {
              font-size: 12px;
            }
          }
        }
      }

      .mark-points {
        color: #fff;
        font-size: 14px;
        width: 826px;
        height: 384px;
        position: relative;

        &>div {
          width: 80px;
          height: 82px;
          text-align: center;
          padding-top: 4px;
          background: url(~@/assets/image/cockpit-mark-blue.png) no-repeat;
          background-size: 100% 100%;
          position: absolute;
        }

        .hf {
          background: url(~@/assets/image/cockpit-mark-yellow.png) no-repeat;
          background-size: 100% 100%;
          top: 116px;
          right: 153px;
        }

        .nj {
          top: 105px;
          right: 110px;
        }

        .sh {
          top: 123px;
          right: 72px;
        }

        .wh {
          top: 134px;
          right: 130px;
        }
      }
    }

    .fr {
      // width: 1043px;
      width: 54%;
      height: 594px;
      padding: 43px 19px 19px;
      margin-top: -26px;
      background: url(~@/assets/image/cockpit-list-bg.png) no-repeat;
      background-size: 100% 100%;

      .fr-hd {
        margin-top: 46px;
        margin-bottom: 18px;
        // flex
        display: flex;

        &>div {
          float: left;

          &:nth-child(1) {
            span:nth-child(1) {
              color: #59fff5;
            }
          }

          span {
            display: block;
            text-align: center;
            font-family: ledFont;
            letter-spacing: 5px
          }

          span:nth-child(1) {
            font-size: 39px;
            color: #74b7f5;
            margin-bottom: 10px;
          }

          span:nth-child(2) {
            font-size: 24px;
            color: #fafafa;
            opacity: .8;
          }
        }

        .deal {
          width: 309px;
        }

        .block {
          width: 240px;
        }

        .node {
          width: 167px;
        }

        .contract {
          width: 287px;
        }
      }

      .el-table {
        border-radius: 0;
        background: #06192f;

        &::before {
          height: 3px;
          top: 0;
          background: rgb(36, 58, 79);
        }

        &>>>tr {
          background: #06192f;

          &:hover {
            background: #06192f !important;

            td {
              background: #06192f !important;
            }
          }

          &:nth-of-type(2n) {
            background: rgb(18, 45, 78) !important;

            &:hover td {
              background: rgb(18, 45, 78) !important;
            }
          }

          td {
            color: #fafafa;
            font-size: 20px;
            border: 0;
            padding: 21px 0;
            letter-spacing: 2px;

            .cell {
              opacity: .8;
            }

            &:nth-child(2),
            &:nth-child(3) {
              color: #59fff5;
              font-family: ledFont;
              letter-spacing: 5px;
              font-size: 30px;
              opacity: 1;
            }
          }
        }

        &>>>.el-table__header-wrapper th,
        &>>>.el-table__fixed-header-wrapper th {
          border-bottom: 0;
          color: #2e8ffc;
          font-size: 20px;
          opacity: .8;
          padding: 18px 0;
          letter-spacing: 2px;
          background: rgb(18, 45, 78);
        }
      }
    }
  }

  .cockpit-ft {
    // width: 1862px;
    display: flex;
    justify-content: space-between;
    width: 97%;
    height: 368px;
    margin-top: 5px;
    margin-left: 25px;
    background: url(~@/assets/image/cockpit-chart-bg.png) no-repeat;
    background-size: 100% 100%;

    .menu {
      width: 80px;
      height: 368px;
      // margin-right: 25px;
      background-color: rgb(10, 27, 42);

      ul {
        padding-left: 0;
        margin: 11px 0;

        li {
          list-style: none;
          width: 32px;
          height: 80px;
          line-height: 15px;
          padding: 24px 9px;
          color: #95bee0;
          font-size: 13px;
          margin: 0 auto;
          border-radius: 25px;
          cursor: pointer;
          background-color: #152e41;

          &:not(:last-child) {
            margin-bottom: 9px;
          }

          &.active {
            background-color: #0386c6;
            color: #fff;
          }
        }
      }
    }

    .item {
      padding: 25px 0;

      &.handle {
        width: 340px;
        // margin-right: 35px;

        .fl-bd {
          padding-left: 15px;

          ul {
            padding: 0;
            margin: 50px 0 0;

            li {
              list-style: none;

              &:not(:last-child) {
                margin-bottom: 20px;
              }

              span {
                font-size: 21px;
                color: #bee4ff;
              }

              .el-progress {
                width: 270px;
                float: right;

                &>>>.el-progress-bar__outer {
                  border-radius: 0;
                  background-color: #2f3b48;
                  height: 18px !important;

                  &::after {
                    content: '';
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 0;
                    right: 0;
                    border-top: 18px solid #071829;
                    border-left: 20px solid transparent;
                  }
                }

                &>>>.el-progress-bar__inner {
                  border-radius: 0;
                  margin-top: 1px;
                  height: 16px !important;
                  background-image: linear-gradient(to right, #0066ff, #0184ff);

                  &::after {
                    content: '';
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 0;
                    right: 0;
                    border-top: 18px solid #2f3b48;
                    border-left: 20px solid transparent;
                  }
                }

                &>>>.el-progress__text {
                  font-size: 20px !important;
                  color: #fff;
                  margin-left: 20px;
                  background-color: rgba(0, 144, 255, .1);
                  box-shadow: 0px 0px 45px 7px rgba(0, 144, 255, .2);
                }
              }
            }
          }

          .single {
            width: 210px;
            height: 210px;
            border-radius: 50%;
            margin-top: 20px;

            .single-box {
              width: 211px;
              height: 213px;
              background: url(~@/assets/image/cockpit-pie-bg.png) no-repeat;
              background-size: 100% 100%;
              padding: 15px;

              div {
                box-sizing: border-box;
                width: 180px;
                border: solid 90px transparent;
                border-right-color: #00a0ff;
                border-radius: 50%;
                position: relative;

                span {
                  position: absolute;
                  font-size: 27px;
                  font-weight: bold;
                  color: #fff;
                  top: -14px;
                  left: 27px;
                }
              }
            }

            p {
              color: #99ccff;
              font-size: 20px;
              text-align: center;
              margin: 10px 0 0;
              width: 210px
            }
          }
        }
      }

      &.receipt {
        // width: 791px;
        // margin-right: 100px;

        .fl-hd {
          margin-bottom: 0;
        }

        .fl-bd {
          &>div {
            float: left;
          }

          .tooltip {
            width: 191px;
            height: 251px;
            background-color: #04101d;
            border: 2px solid #0750a2;
            padding-right: 3px;
            margin-top: 23px;
            position: relative;

            &::before {
              content: '';
              position: absolute;
              width: 6px;
              height: 6px;
              background-color: #fff;
              top: 9px;
              left: -7px;
            }

            &::after {
              content: '';
              position: absolute;
              top: 11px;
              left: -33px;
              border-top: 1px dashed #48d1cd;
              width: 25px;
            }

            &>div {
              font-size: 29px;
              color: #fff;
              font-family: ysHFont;
              margin: 7px 0 7px 15px;
            }

            ul {
              margin: 0;
              padding: 0 3px 0 0;
              overflow-y: scroll;
              height: 200px;

              &::-webkit-scrollbar {
                width: 6px;
                height: 1px;
              }

              &::-webkit-scrollbar-thumb {
                border-radius: 6px;
                background: #45d7ea;
              }

              &::-webkit-scrollbar-track {
                border-radius: 10px;
                background: #05121f;
              }

              li {
                list-style: none;
                color: #bee4ff;
                font-size: 21px;
                height: 40px;
                padding-left: 20px;
                padding-right: 15px;
                line-height: 40px;

                &:nth-of-type(2n+1) {
                  background-color: #153c68;
                }

                span:nth-child(1) {
                  display: inline-block;
                  width: 100px;
                  text-align: left;
                }

                span:nth-child(2) {
                  display: inline-block;
                  width: 33px;
                  text-align: right;
                }
              }
            }
          }

          .tooltip-single {
            width: 191px;
            height: 212px;
            background: url(~@/assets/image/cockpit-tooltip-bg.png) no-repeat;
            background-size: 100% 100%;
            padding-right: 3px;
            margin-top: 23px;
            padding: 10px;
            position: relative;

            &::before {
              content: '';
              position: absolute;
              width: 6px;
              height: 6px;
              background-color: #fff;
              top: 9px;
              left: -4px;
            }

            &::after {
              content: '';
              position: absolute;
              top: 11px;
              left: -30px;
              border-top: 1px dashed #48d1cd;
              width: 25px;
            }

            .time {
              font-size: 29px;
              color: #fff;
              font-family: ysHFont;
            }

            .number {
              font-size: 34px;
              color: #fff;
              font-family: ysHFont;
              width: 171px;
              height: 57px;
              background: url(~@/assets/image/cockpit-tooltip-num-bg.png) no-repeat;
              background-size: 100% 100%;
              line-height: 57px;
              text-align: center;
              margin-top: 30px;
            }

            .area {
              color: #bee4ff;
              font-size: 20px;
              margin-top: 20px;
              text-align: center;
            }
          }
        }
      }

      &.comment {
        .fl-bd {
          padding-left: 30px;
        }
      }

      .fl-hd {

        img {
          float: left;
          margin-right: 10px;
        }

        .amount {
          float: left;
          color: #fff;

          span {
            display: block;
          }

          span:nth-child(1) {
            font-size: 30px;
            font-family: ysHFont;
            margin-top: -7px;
          }

          span:nth-child(2) {
            font-size: 19px;
            margin-top: 6px;
          }
        }
      }
    }

  }
}

</style>
